import React, {PureComponent} from 'react';
import styles from './index.less';
import {Link} from 'dva/router';
import {Table, Alert, Badge, Switch, Icon, InputNumber, Tooltip, Popconfirm,Button}  from 'antd';
import {powerControl} from '../../../utils/powerControl';
const AuthButton = powerControl(Button);

class SellerList extends PureComponent {

    state = {
        selectedRowKeys: [],
        totalCallNo: 0,
    };
    componentWillReceiveProps(nextProps) {
        if (nextProps.selectedRows.length === 0) {
            this.setState({
                selectedRowKeys: [],
                totalCallNo: 0,
            });
        }
    }
    handleEditRow = (record, pagination) => {
        this.props.onEditRow(record, pagination);
    }

    handleTableChange = (pagination, filters, sorter) => {
        this.props.onChange(pagination, filters, sorter);
    }

    handleUpdateRow = (shipping_templet_id, shipping_templet_status,pagination) => {
        this.props.onUpdateRow(shipping_templet_id,shipping_templet_status, pagination);
    }

    render(){
          const {selectedRowKeys, totalCallNo} = this.state;
          const {data: {list, pagination}, loading} = this.props;
          const columns = [
            {
                title: '商家ID', dataIndex: 'id',
                render: (val, record) => {
                    return <Tooltip placement="right" title={record.id}>
                        <span>{val}</span>
                    </Tooltip>
                }
            },
            {
                title: '店铺名称', dataIndex: 'shop_name',
                render: (val, record) => {
                    return <Tooltip placement="right" title={record.shop_name}>
                        <span>{val}</span>
                    </Tooltip>
                }
            },
            {
                title: '模板名称', dataIndex: 'shipping_templet_name',
                render: (val, record) => {
                    return <Tooltip placement="right" title={record.shipping_templet_name}>
                        <span>{val}</span>
                    </Tooltip>
                }
            },
            {
                title: '运费标题', dataIndex: 'shipping_title',
                render: (val, record) => {
                    return <Tooltip placement="right" title={<record className="shipping_title"></record>}>
                       <span>{val}</span>
                    </Tooltip>
                }
            },
              {
                  title: '模板状态', dataIndex: 'shipping_templet_status',
                  render(val) {
                      return <Tooltip placement="right" title={<record className="shipping_templet_status"></record>}>
                          <Switch checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon type="cross" />} disabled  defaultChecked={val=='1'?true:false}  />
                      </Tooltip>
                  },
              },
            {
                title:'操作',
                render: (val, record) => (
                    <p>
                        <Button  ghost  className={styles.btn} size="small" ><Link to={{pathname:'/systemConfig/shipping-seller-details',state:{record:record}}}>编辑</Link></Button>
                        <span className={styles.splitLine}/>
                        <Popconfirm title="是否确定修改?" onConfirm={() => this.handleUpdateRow(record.shipping_templet_id,record.shipping_templet_status,pagination)} >
                            <Button  ghost  className={styles.btn} size="small">{record.shipping_templet_status=='1'?'禁用模板':'启用模板'}</Button>
                        </Popconfirm>
                    </p>

                ),
            },
        ];


        const paginationProps = {
            showSizeChanger: true,
            showQuickJumper: true,
            ...pagination,
        };
        return (
            <div className={styles.standardTable}>
                <Table
                loading={loading}
                rowKey={record => record.shipping_id}
                // rowSelection={rowSelection}
                dataSource={list}
                columns={columns}
                pagination={paginationProps}
                onChange={this.handleTableChange}
                scroll={{x: 1000}}
            />
            </div>
        )

    }
}
export default SellerList;

